<template>
    <!-- 头部 -->
    <div>
        <div class="header">
            智慧城市大气环境监测平台
        </div>
        <!-- 体部 -->
        <div class="content">
            <!-- 上边部分占2份 -->
            <div class="top">
                <!-- 将上边分为左中右三部分 -->
                 <div class="left">
                    <div class="charts">
                        <Left1></Left1>
                    </div>
                    <div class="charts">
                        <Left2></Left2>
                    </div>
                 </div>
                 <div class="center" style="height: 100%;">
                    <Map style="height: 100%;"></Map>
                    </div>
                 <div class="right">
                    <div class="charts">
                        <Right1></Right1>
                    </div>
                    <div class="charts">
                        <Right2></Right2>
                    </div>
                 </div>
            </div>
            <!-- 下边部分占1份 -->
            <div class="bottom">
                 <!-- 将下边分为左中右三部分 -->
                  <div class="charts">
                    <Bottom1></Bottom1>
                  </div>
                    <div class="charts">
                        <Bottom2></Bottom2>
                    </div>
                    <div class="charts">
                        <Bottom3></Bottom3>
                    </div>
                    <div class="charts">
                        <Bottom4></Bottom4>
                    </div>
            </div>
        </div>
    </div>
</template>
  <!-- js代码-->
<script>
//引入组件
import Left1 from './components/Left1.vue';
import Left2 from './components/Left2.vue';
import Right1 from './components/Right1.vue';
import Right2 from './components/Right2.vue';
import Bottom1 from './components/Bottom1.vue';
import Bottom2 from './components/Bottom2.vue';
import Bottom3 from './components/Bottom3.vue';
import Bottom4 from './components/Bottom4.vue';
import Map from './components/Map.vue';
export default {
  //组件注册
  components:{
    Left1,
    Left2,
    Right1,
    Right2,
    Bottom1,
    Bottom2,
    Bottom3,
    Bottom4,
    Map,
  }
}
</script>
<!-- css样式 scoped当前作用域 经当前页面生效 -->
<style lang="less" scoped>
//头部样式
.header{
    height: 60px;
    background-image: url(../assets/layout/header.png);
    background-size: 100% 300%;
    text-align: center;
    color: white;
    font-size: 28px;
    font-family: "楷体";
    font-weight: bold;
    line-height: 40px;
}
//体部样式
.content{
    height: calc(100vh - 60px);
   
    //设置弹性和
    display: flex;
    // 将主轴改为垂直方向
    flex-direction: column;
    .top{
        flex: 2;
        
        //将top设置为弹性和
        display: flex;
        .left,.right{
            flex: 1;
           display: flex;
            flex-direction: column;
            //&表示直接父元素
            &>div{
                flex: 1;
            }
        }
        .center{
            flex:2;
            background-image: url(../assets/layout/chart_center_box_bg.png);
            background-size: 100% 100%;
            margin: 5px;
            color: white;
        }
    }
    .bottom{
        flex: 1;
     
        display: flex;
        &>div{
            flex: 1;
        }
    }
    .charts{
        background-image: url(../assets/layout/chart_box_bg.png);
        background-size: 100% 100%;
        margin: 5px ;
        padding: 10px 5px 5px 10px;
        color: white;
    }
}
</style>